<template>
  <demoBlock title="级联选择" padding>
    <vcu-picker
      title="标题"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const columns = [
      {
        text: "浙江",
        children: [
          {
            text: "杭州",
            children: [{ text: "西湖区" }, { text: "余杭区" }],
          },
          {
            text: "温州",
            children: [{ text: "鹿城区" }, { text: "瓯海区" }],
          },
        ],
      },
      {
        text: "福建",
        children: [
          {
            text: "福州",
            children: [{ text: "鼓楼区" }, { text: "台江区" }],
          },
          {
            text: "厦门",
            children: [{ text: "思明区", disabled: true }, { text: "海沧区" }],
          },
        ],
      },
    ];
    const onConfirm = (value, index) => {
      console.info(`当前值:  ${JSON.stringify(value)}, 当前索引: ${index}`);
    };
    const onChange = (value, index) => {
      console.info(`当前值: ${JSON.stringify(value)}, 当前索引: ${index}`);
    };
    const onCancel = () => console.info("取消");

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
});
</script>
